<!-- 申请售后页 -->
<template>
	<view class="my-content box">
		<view class="afterSale">
			<view class="title">
				<view class="_title"></view>
				<text>{{$t("售后详情")}}</text>
			</view>
			<view class="ordernumber">
				<view class="top">
					<p>{{$t("订单编号")}}:
						<text>{{ order_info.order_no }}</text>
					</p>
					<p>{{$t("类型")}}:
						<text>{{ order_type[order_info.type] }}</text>
					</p>
				</view>
			</view>
			<view class="ordernumber">
				<view class="top">
					<p>{{$t("审核状态")}}:
						<text v-if="info.status === '0'">{{ $t("待审核") }}</text>
						<text v-if="info.status === '1'">{{ $t("已通过") }}</text>
						<text v-if="info.status === '2'">{{ $t("已拒绝") }}</text>
					</p>
					<p>{{$t('退款比例')}}:
						<text>{{ info.refund * 100 +'%' }}</text>
					</p>
					<p>{{$t("审核说明")}}:
						<text>{{ info.reason || $t("暂无信息")}}</text>
					</p>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL,
		IMAGE_MAX_SIZE,
		IMAGE_MAX_COUNT
	} from 'config/app.js'

	export default {
		data() {
			return {
				bail: null,
				show: false,
				order_type: {
					goods: '货物',
					transport: '运输',
					crossborder: '跨境货代',
					professional: '专业代办',
				},
				selector: [{
						cateName: '10%',
						refund: '0.1'
					},
					{
						cateName: '20%',
						refund: '0.2'
					},
					{
						cateName: '30%',
						refund: '0.3'
					},
					{
						cateName: '40%',
						refund: '0.4'
					},
					{
						cateName: '50%',
						refund: '0.5'
					},
					{
						cateName: '60%',
						refund: '0.6'
					},
					{
						cateName: '70%',
						refund: '0.7'
					},
					{
						cateName: '80%',
						refund: '0.8'
					},
					{
						cateName: '90%',
						refund: '0.9'
					},
					{
						cateName: '100%',
						refund: '1'
					}
				],
				// 按钮样式
				customStyle: {
					width: '656rpx',
					height: '63rpx',
					background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
					'border-radius': '26rpx',
				},
				order_id: 0,
				content: '',
				images: [],
				refund: '',
				action: HTTP_REQUEST_URL + '/common/upload',
				imageMaxSize: IMAGE_MAX_SIZE,
				imageMaxCount: IMAGE_MAX_COUNT,
				limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'],
				order_info: {}, //订单信息
				info: {},
			}
		},
		onLoad(options) {
			this.order_id = options.order_id
			this.$u.api.order.getOrderDetail({
			  id: this.order_id
			}).then(res => {
			  this.order_info = {
			    order_no: res.orderInfo.order_no,
			    type: res.orderInfo.type,
			    name: res.orderInfo.release_info.name
			
			  }
			})
			this.$u.api.order.getRefundDetail({
				order_id: this.order_id,
			}).then(res => {
				this.info = res;
			})
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.$t("申请详情")
			})
		},
		methods: {
			// 上传图片成功的回调
			success(data) {
				this.images.push({
					url: data.data.fullurl
				})
				// console.log(this.images)
			},
			// 拿到申请说明
			bindTextAreaBlur(e) {
				// console.log(e.detail.value)
				this.content = e.detail.value
			},
			// 拿到保证金
			confirm(val) {
				// console.log(val);
				this.bail = this.selector[val].cateName
				this.refund = this.selector[val].refund
			},
			// 提交售后
			submit() {
				this.$u.api.order.saveRefund({
					order_id: this.order_id,
					content: this.content,
					images: this.images,
					refund: this.refund
				}).then(res => {
					this.$u.toast(this.$t('提交成功，请等待后台审核'))
					setTimeout(() => {
						this.$u.route({
							url: '/pages/tabbar/order/index',
							type: 'switchTab'
						})
					}, 1000)
				}).catch(err => {
					this.$u.toast(msg)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		display: flex;
		flex-direction: column;
	}

	.afterSale {
		height: calc(100% - 178rpx);
		background: #f9f9f9;
		padding: 19rpx 20rpx 0 17rpx;

	}

	.title {
		._title {
			width: 2rpx;
			height: 37rpx;
			border: 5rpx solid;
			border-image: linear-gradient(180deg, rgba(221, 42, 16, 1), rgba(247, 152, 41, 1)) 5 5;
			float: left;
			margin-left: 15.7rpx;
		}

		text {
			font-weight: 500;
			color: #0B0B0B;
			line-height: 35rpx;
			margin-left: 5.23rpx;
		}
	}

	.ordernumber {
		width: 100%;
		height: 248rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(232, 232, 232, 0.5);
		border-radius: 19rpx;
		margin-top: 17rpx;
		padding: 0 24rpx 0 24rpx;
		display: flex;
		flex-direction: column;

		.top {
			display: flex;
			flex-direction: column;
			justify-content: space-evenly;
			width: 100%;
			height: 162rpx;
			border-bottom: 2rpx solid #DCDCDC;
			box-sizing: border-box;

			p {
				font-weight: 400;
				color: #000000;
				line-height: 30rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				text {
					margin-left: 20rpx;
				}
			}
		}

		.bottom {
			flex: 1;
			font-weight: 400;
			color: #787878;
			line-height: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.explain {
		width: 100%;
		height: 546rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(232, 232, 232, 0.5);
		border-radius: 19rpx;
		margin-top: 17rpx;
		padding: 20rpx 0 0 26rpx;

		.tp {
			margin: 10rpx;
		}
	}

	.foot {
		flex: 1;
		display: flex;
		justify-content: center;
		padding-top: 26rpx;

		font-weight: 600;
		color: #FFFFFF;
		line-height: 35rpx;
	}
</style>